<template>
    
    <div class="content">
        <div class="kongbai" style="width:100%;height: 60px;" v-if="isEconomical && iskongbai && !isPaymentPage"></div>
        <div class="recharge_content" :class="{isEconomical}" ref="recharge_content">
            <div class="close" v-if="isEconomical && !isPaymentPage" @click="closeBox" ref="close_box"></div>
            <div v-if="isEconomical">
                <div class="recharge-content-title">{{ $t('Payment_amount') }}</div>
                <p class="price">${{ price }}</p>
            </div>
            <div v-if="!isEconomical">
                <div class="recharge-content-title">{{ $t('recharge_money') }} 
                    <span v-if="selectCurrency == 'USD'">{{ $t('recharge_tip') }}</span>
                    <span v-if="selectCurrency == 'TWD'">{{ $t('recharge_tip2') }}</span>
                    <el-select v-model="selectCurrency" placeholder="選擇幣種" size="small" style="width: 100px;margin-left: 8px;" @change="changeCurrency">
                        <el-option v-for="item in selectCurrency_options" :key="item.value" :label="item.label" :value="item.value"/>
                    </el-select>
                </div>
                
                <div class="pay-rechange-panel-box">
                    <div class="pay-rechange-item" v-for="item,index in chargeList" :key="item.id" @click="select_price(item.id,item.currency,index,item.amount)"
                        :class="{ 'pay-rechange-item-selected': select_item == index }">
                        <div class="pay-rechange-item-num">
                            <div class="pay-rechange-item-num-title-1">{{item.price}} Y {{ $t('coin') }}</div>
                        </div>
                        <div class="pay-rechange-item-bottom">{{ $t('price') }} {{selectCurrency == 'USD' ? '$' : 'NT$'}}{{ item.amount }}</div>
                        <p class="bef" v-if="item.give > 0">{{ $t('give') }} {{item.give}} Y {{ $t('coin') }}</p>
                    </div>
                </div>
            </div>

            <div class="recharge-content-title" v-if="pay_type !== 'platform'">
                {{ $t('coupon') }} 
                <!-- <p @click="isCoupon = true" v-if="lang == 'en'">
                    <span class="coupon_text" v-if="now_coupon_type == 1 && coupon_text != ''">{{selectCurrency == 'USD' ? coupon_text : (coupon_text*33).toFixed(2)}}</span> 
                    <span class="coupon_text" v-if="now_coupon_type == 2 && coupon_text != ''">{{coupon_text * 10}} off </span>  
                    <span class="coupon_text">{{ $t('coupon_text') }}</span> &nbsp;
                    <span v-if="coupon_text == ''" class="coupon_text">{{ $t('choice_tip') }}</span>
                    <svg t="1725605194184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5817" width="13" height="13"><path d="M782.8 511.1 351.9 942c-22.8 22.8-59.8 22.8-82.6 0-22.8-22.8-22.8-59.8 0-82.6L617.5 511.1 269.2 162.8c-22.8-22.8-22.8-59.8 0-82.6 22.8-22.8 59.8-22.8 82.6 0L782.8 511.1 782.8 511.1zM782.8 511.1" p-id="5818" fill="#ff0000"></path></svg>
                </p> -->

                <p @click="isCoupon = true">
                    <span class="coupon_text" v-if="now_coupon_type == 1 && coupon_text != ''">-{{selectCurrency == 'USD' ? '$' : 'NT$'}}{{selectCurrency == 'USD' ? coupon_text : (coupon_text*33).toFixed(2)}}</span> 
                    <span class="coupon_text" v-if="now_coupon_type == 2 && coupon_text != ''">-{{selectCurrency == 'USD' ? '$' : 'NT$'}}{{(price -  (price * coupon_text).toFixed(2)).toFixed(2)}}</span> 
                    <span class="coupon_text" v-if="coupon_text == ''">{{ lang == 'zh' ? `剩${coupon_list.length}張優惠券待使用` : `${coupon_list.length} coupons remaining to be used` }} </span> 
                    <!-- {{ $t('coupon_text') }} -->
                    <svg t="1725605194184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5817" width="13" height="13"><path d="M782.8 511.1 351.9 942c-22.8 22.8-59.8 22.8-82.6 0-22.8-22.8-22.8-59.8 0-82.6L617.5 511.1 269.2 162.8c-22.8-22.8-22.8-59.8 0-82.6 22.8-22.8 59.8-22.8 82.6 0L782.8 511.1 782.8 511.1zM782.8 511.1" p-id="5818" fill="#ff0000"></path></svg>
                </p>
            </div>
            <div class="recharge-content-title">{{ $t('recharge_type') }} <br v-if="lang == 'en'"/>
                <span v-if="!isPaymentPage">{{ $t('recharge_msg') }}</span>
                <span :class="{tip_en:lang == 'en'}" class="tip" @click="toPages" v-if="isEconomical && user_info.charge_money>0 && !user_info.is_money_card">{{ $t('discount_tip') }}</span>
            </div>
            <div class="saveChoose-btn">
                <span>{{ $t('choice') }}：</span>
                <div class="select-wrapper">
                    <el-select v-model="selectedCountry" placeholder="Select" size="default" style="width: 110px" @change="handleChange">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
                    </el-select>
                    <div class="arrow"></div>
                </div>
                <div class="saveChoose-middle">
                    <ul class="data_pay_method">

                        <li data-href="card" :class="{'active':active_item == index}" v-for="item,index in pay_list" @click="setPayInfo(item.type,index)">
                            <img class="save-logo" :src="item.img_url" alt="">
                            <div class="middle-text ">
                                <!-- <div class="add appear">加贈</div> -->
                                <div class="name">{{item.pay_name}}</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="saveConfirm">
                    <button v-if="isEconomical && now_coupon_type == 1 && payment !='platform'" @click="goClientPay">{{ $t('Confirm_payment') }} ${{ coupon_text=='' && payment !='platform' ? price : (price - coupon_text < 0 ? 0 : (price - coupon_text).toFixed(2) )}}</button>
                    <button v-if="isEconomical && now_coupon_type == 2 && payment !='platform'" @click="goClientPay">{{ $t('Confirm_payment') }} ${{ coupon_text=='' && payment !='platform' ? price : (price * coupon_text).toFixed(2)}}</button>

                    <button v-if="isEconomical && payment =='platform'" @click="goClientPay">{{ $t('Confirm_payment') }} ${{ price }}</button>
                    <!-- 平台储值 -->
                    <button v-if="!isEconomical && now_coupon_type == 1 && selectCurrency == 'USD'" @click="goClientPay_platform">{{ $t('Confirm_payment') }} {{selectCurrency == 'USD' ? '$' : 'NT$'}}{{ coupon_text=='' ? select_amount : (select_amount-coupon_text < 0 ? 0 : (select_amount-coupon_text).toFixed(2))}}</button>
                    <button v-if="!isEconomical && now_coupon_type == 1 && selectCurrency == 'TWD'" @click="goClientPay_platform">{{ $t('Confirm_payment') }} {{selectCurrency == 'USD' ? '$' : 'NT$'}}{{ coupon_text=='' ? select_amount : (select_amount-(coupon_text*33) < 0 ? 0 : (select_amount-(coupon_text*33)).toFixed(2))}}</button>
                    <button v-if="!isEconomical && now_coupon_type == 2" @click="goClientPay_platform">{{ $t('Confirm_payment') }} {{selectCurrency == 'USD' ? '$' : 'NT$'}}{{ coupon_text=='' ? select_amount : (select_amount * coupon_text).toFixed(2)}}</button>
                </div>
            </div>
        </div>
        <div class="blocker" v-if="isEconomical"></div>

        <div class="masker" v-if="!isEconomical && isMasker"></div>
        <div class="pay_result" v-show="showPayResultStore.isPayResult">
            <div class="close" @click="close_pay_result"></div>
            <!-- <Loadding v-show="isLoading" /> -->
            <iframe :src="pay_result_src" width="100%" height="100%" frameborder="0" ></iframe>
        </div>

        <div class="pay_result couponPage" v-show="couponPagePc">
            <div class="close" @click="closeCouponPage"></div>
            <Loadding v-show="isLoading" />
            <iframe :src="couponPageSrc" width="100%" height="100%" frameborder="0" ></iframe>
        </div>
        
        <div v-if="lang == 'zh'">
            <BindAccount :visible="visible" :handleClose='handleClose' :getUserInfo="getUserInfo" :fb_bind_show="fb_bind_show" :yh_bind_show="yh_bind_show" :gg_bind_show="gg_bind_show"/>
            <Dialog :title="'請確認付款'" :title2="'支付成功可在儲值記錄中查看'" :cancel_title="'還未支付'" :sub_title="'已完成支付'" :visible="dialog_show" :handleClose='paySubmit' :paySubmit="paySubmit"/>
            <Dialog :title="'faceBook绑定'" :title2="'faceBook是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'" :visible="dialog_fb_bind" :handleClose='fb_bind_com' :paySubmit="fb_bind_com"/>
            <Dialog :title="'Yahoo绑定'" :title2="'Yahoo是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'" :visible="dialog_yh_bind" :handleClose='yh_bind_com' :paySubmit="yh_bind_com"/>
            <Dialog :title="'Google绑定'" :title2="'Google是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'" :visible="dialog_gg_bind" :handleClose='gg_bind_com' :paySubmit="gg_bind_com"/>
            <div v-if="visible_setPwd" class="modal-setPwd">
                <div class="modal">
                    <div class="modal-header">
                        <h3>設置安全碼</h3>
                        <p>安全碼用于支付時的安全保障，請您設置！</p>
                        <p>注意：安全碼設置后無法修改</p>
                        <div class="close" @click="handleClose_pwd"></div>
                    </div>
                    <div class="modal-body">
                        <!-- <label for="password">支付密码</label> -->
                        <input type="password" maxlength="6" v-model="set_password" id="password" placeholder="請設置6位數字安全碼">
                    </div>
                    <div class="modal-footer">
                        <button @click="handleClose_pwd">取消</button>
                        <button @click="handleSubmit_setPWd">确认</button>
                    </div>
                </div>
            </div>  
        </div>

        <div v-if="lang == 'en'">
            <BindAccount :visible="visible" :handleClose='handleClose' :getUserInfo="getUserInfo" :fb_bind_show="fb_bind_show"/>
            <Dialog :title="'Please confirm payment'" :title2="'Payment success can be viewed in the stored value record'" :cancel_title="'Not yet paid'" :sub_title="'Payment completed'" :visible="dialog_show" :handleClose='paySubmit' :paySubmit="paySubmit"/>
            <Dialog :title="'Facebook binding'" :title2="'Is Facebook successfully bound?'" :cancel_title="'Binding failed'" :sub_title="'Binding successful'" :visible="dialog_fb_bind" :handleClose='fb_bind_com' :paySubmit="fb_bind_com"/>
            <Dialog :title="'Yahoo binding'" :title2="'Is Yahoo successfully bound?'" :cancel_title="'Binding failed'" :sub_title="'Binding successful'" :visible="dialog_yh_bind" :handleClose='yh_bind_com' :paySubmit="yh_bind_com"/>
            <Dialog :title="'Google binding'" :title2="'Is Google successfully bound?'" :cancel_title="'Binding failed'" :sub_title="'Binding successful'" :visible="dialog_gg_bind" :handleClose='gg_bind_com' :paySubmit="gg_bind_com"/>
            <div v-if="visible_setPwd" class="modal-setPwd">
                <div class="modal">
                    <div class="modal-header">
                    <h3>Set security code</h3>
                    <p>The security code is used for secure verification operations during platform payments. Please set it upv！</p>
                    <p>Attention: After setting the security code, it cannot be modified</p>
                    <div class="close" @click="handleClose_pwd"></div>
                    </div>
                    <div class="modal-body">
                    <!-- <label for="password">支付密码</label> -->
                    <input type="password" maxlength="6" v-model="set_password" id="password" placeholder="Please set 6 as the digital security code">
                    </div>
                    <div class="modal-footer">
                    <button class="btn confirm-button" @click="handleClose_pwd">cancel</button>
                    <button class="btn confirm-button" @click="handleSubmit_setPWd">confirm</button>
                    </div>
                </div>
            </div>  
        </div>

        <div class="coupon_black" v-show="isCoupon" @click="isCoupon = false"></div>
        <div  :class="{'open':isCoupon,'coupon_width':lang == 'en'}" class="coupon">
            
            <div class="close" @click="isCoupon = false;selectedRadio = '';coupon_text=''"></div>
            <div class="recharge_title">{{ $t('my_coupon') }}</div>
            <el-empty :description="$t('no_coupon')" v-if="coupon_list.length == 0"/>
            <div class="item_box">
                <!-- 平台优惠券充值 -->
                <div v-if="!isEconomical" class="item" v-for="item in coupon_list" :key="item.id" :class="{'coupon_notUse':select_amount < (selectCurrency == 'USD' ? item.max_money : item.max_money*33)}">
                    <div style="width: 103px;">
                        <p v-if="item.coupon_type == 1">{{selectCurrency == 'USD' ? '$' : 'NT$'}}{{ (selectCurrency == 'USD' ? item.coupon_money : item.coupon_money * 33).toFixed(2) }}</p>
                        <p v-if="item.coupon_type == 2">{{ item.coupon_money * 10 }}折</p>
                        <h4 v-if="lang == 'zh' && item.max_money != 0">滿{{(selectCurrency == 'USD' ? item.max_money : item.max_money * 33).toFixed(2)}}可用</h4>
                        <h4 v-if="lang == 'en' && item.max_money != 0">{{$t('coupon_tip')}} {{(selectCurrency == 'USD' ? item.max_money : item.max_money * 33).toFixed(2)}}</h4>

                        <h4 v-if="item.max_money == 0">{{$t('No_threshold')}}</h4>
                    </div>
                    <div v-if="item.coupon_type == 1" >{{$t('use_coupon_tip')}} <span style="color: red;font-weight: bold;">{{selectCurrency == 'USD' ? '$' : 'NT$'}}{{ (selectCurrency == 'USD' ? item.coupon_money : item.coupon_money * 33).toFixed(2) }}</span></div>
                    <div v-if="item.coupon_type == 2">{{$t('use_coupon_tip')}} <span style="color: red;font-weight: bold;">{{selectCurrency == 'USD' ? '$' : 'NT$'}}{{ (select_amount - (select_amount * item.coupon_money)).toFixed(2)  }}</span></div>
                    <div>
                        <el-radio-group v-model="selectedRadio">
                            <el-radio :value="item.id" size="large"></el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <!-- 游戏优惠券充值 -->
                <div v-if="isEconomical" class="item" v-for="item in coupon_list" :key="item.id" :class="{'coupon_notUse':price < item.max_money}">
                    <div style="width: 103px;">
                        <p v-if="item.coupon_type == 1">${{ item.coupon_money }}</p>
                        <p v-if="item.coupon_type == 2">{{ item.coupon_money * 10 }}折</p>
                        <h4 v-if="lang == 'zh' && item.max_money != 0">滿{{item.max_money}}可用</h4>
                        <h4 v-if="lang == 'en' && item.max_money != 0">{{$t('coupon_tip')}} {{item.max_money}}</h4>

                        <h4 v-if="lang == 'zh' && item.max_money == 0">無使用門檻</h4>
                        <h4 v-if="lang == 'en' && item.max_money == 0">{{$t('No_threshold')}}</h4>
                    </div>

                    <div v-if="item.coupon_type == 1" >{{$t('use_coupon_tip')}} <span style="color: red;font-weight: bold;">${{ item.coupon_money }}</span></div>
                    <div v-if="item.coupon_type == 2">{{$t('use_coupon_tip')}} <span style="color: red;font-weight: bold;">${{ (price - (price * item.coupon_money)).toFixed(2)  }}</span></div>
                    <div>
                        <el-radio-group v-model="selectedRadio">
                            <el-radio :value="item.id" size="large"></el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
            <button class="button" @click="use_coupon" v-if="coupon_list.length !== 0" :class="{'coupon_notUse':!selectedRadio}">{{ $t('confirm') }}</button>
        </div>

        <div class="mask_Re" v-if="couponPage"></div>
    </div>

        
  
</template>

<script setup>
    import { ref, toRefs,reactive, onMounted, watchEffect } from 'vue'
    import axios from '@/utils/api'
    import { useUserInfoStore } from '@/store/modules/user_info/index';
    import {useShowPayResult} from "@/store/modules/isShowPayResult"
    import BindAccount from "@/components/UserCenter/bindAccount/index.vue"
    import Dialog from "@/components/Dialog/index.vue"
    const user_infoStore = useUserInfoStore();
    let user_info = reactive(user_infoStore.userInfo)
    const userid = user_infoStore.userInfo.id
    let isMasker = ref(false)
    const iframe = ref()
    let isLoading = ref(true)
    iframe.onload = function() {
        loadingStore.stopLoading()
    };
    const select_amount = ref(0)
    const visible_setPwd = ref(false);
    const set_password = ref('')
    const handleClose_pwd = () => {
        visible_setPwd.value = false
        set_password.value = ''
    };

    let dialog_show = ref(false)
    const dialog_hide = () => {
        dialog_show.value = false
    }
    const paySubmit = ()=>{
        // console.log('完成支付');
        getUserInfo()
        getCouponList()
        coupon_text.value = ''
        selectedRadio.value = ''
        dialog_hide()
        if(user_info.status == 0){
            visible.value = true
        }
    }

    let dialog_fb_bind = ref(false)
    const fb_bind_show = ()=>{
        dialog_fb_bind.value = true
    }
    const fb_bind_com = ()=>{
        getUserInfo()
        dialog_fb_bind.value = false
    }

    let dialog_yh_bind = ref(false)
    const yh_bind_show = ()=>{
        dialog_yh_bind.value = true
    }
    const yh_bind_com = ()=>{
        getUserInfo()
        dialog_yh_bind.value = false
    }

    let dialog_gg_bind = ref(false)
    const gg_bind_show = ()=>{
        dialog_gg_bind.value = true
    }
    const gg_bind_com = ()=>{
        getUserInfo()
        dialog_gg_bind.value = false
    }

    let select_item = ref(0)
    let selectedCountry = ref('港澳台');
    let order_type = ref(1) //1游戏 2平台
    let active_item = ref(0)
    const props = defineProps(['isEconomical','closeBox','price','pay_info','isHomeRech','setPayResult','openDialog','goHome','isPaymentPage']);
    let {isEconomical,closeBox,price,pay_info,isHomeRech,setPayResult,goHome,isPaymentPage} = toRefs(props) //isPaymentPage判断是否ios PaymentPage页面

    let pay_url = ref('')
    let sku = ref('')
    let currency = ref('')
	const resetUrl = () => {
        if(window.baseUrl == "http://192.168.110.244:8081/game/public"){ //判断是否本地或测试服
            pay_url.value = "http://192.168.110.244:8081/game/public/index.php/pay/"
        }else{
            pay_url.value = window.baseUrl+"/index.php/pay/"
        }
    }

    const selectCurrency = ref('')
    if(navigator.language == 'zh-TW'){
        selectCurrency.value = 'TWD'
    }else{
        selectCurrency.value = 'USD'
    }
    const selectCurrency_options = ref([])

    if(localStorage.getItem('lang') == 'en'){
        selectCurrency_options.value = [
            {
                value: 'USD',
                label: 'USD',
            },
            {
                value: 'TWD',
                label: 'TWD',
            },
        ]
    }else{
        selectCurrency_options.value = [
            {
                value: 'USD',
                label: '美元',
            },
            {
                value: 'TWD',
                label: '新台幣',
            },
        ]
    }

    const changeCurrency = (e)=>{
        console.log(e);
        getChargeList()
    }

    const chargeList = ref([])
    const getChargeList = async () =>{
        const list = await axios.get('/platformRecharge?currency='+selectCurrency.value)
        chargeList.value = list.data
        select_price(chargeList.value[0].id,chargeList.value[0].currency,0,chargeList.value[0].amount)
    }
    

    //合并全球支付方式pay_list并去重
    const mergeAndRemoveDuplicates = (...lists) => {
        const combined = lists.flat();
        const seen = new Set();
        return combined.filter(item => {
            const duplicate = seen.has(item.type);
            seen.add(item.type);
            return !duplicate;
        });
    };

    function isAppleDevice() {
        return /iPhone|iPad|iPod|Macintosh/.test(navigator.userAgent) && !window.MSStream;
    }

    

    function observeElementVisibility(element, callback) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
            if (entry.isIntersecting) {
                callback(true); // 元素在视口中可见
            } else {
                callback(false); // 元素不在视口中可见
            }
            });
        }, { threshold: 1 }); // 当元素至少有10%在视口中时触发

        observer.observe(element);

        return observer; // 返回观察器实例以便稍后取消观察
    }

    
    

    const close_box = ref()
    const recharge_content = ref()

    const adjustContentHeight = () => {
        if(window.innerWidth < 1024){
            if(window.innerHeight < 650 && !isPaymentPage.value){
                // recharge_content.value.style.marginTop = '90px'
                recharge_content.value.style.position = 'relative'
                recharge_content.value.style.top = '90px'
                // close_box.value.style.top = '110px'
            }else{
                // recharge_content.value.style.marginTop = '0'
                // close_box.value.style.top = '10px'
                recharge_content.value.style.position = 'relative'
                recharge_content.value.style.top = '0'
            }
        }

        // if (isMobileChrome()) {
        //     recharge_content.value.style.position = 'relative'
        //     recharge_content.value.style.top = '60px'
        // }
        

        if (isAppleDevice()) {
            const bodyH = document.documentElement.clientHeight
            document.documentElement.style.setProperty('--bodyH', `${bodyH}px`);
            document.documentElement.style.setProperty('--bodyPay', `${bodyH}px`);
        } else {
            document.documentElement.style.setProperty('--bodyH', `100vh`);
            const bodyH = document.documentElement.clientHeight
            document.documentElement.style.setProperty('--bodyPay', `${bodyH}px`);
        }
    };

    if(isHomeRech.value == undefined){ //判断是否是储值平台币还是游戏中充值、不写平台没参数会报错
        //游戏中充值
        order_type.value = 1
        // setPayInfo('card',0) //默认支付宝
        onMounted(()=>{
            adjustContentHeight()
            window.addEventListener('resize', adjustContentHeight);
        })
    }else{
        //储值平台币
        order_type.value = 2
        getChargeList()
    }

    let payment = ref('')
    let pay_type = ref('')
    const setPayInfo = (type,index)=>{
		active_item.value = index || 0
        pay_type.value = type
        
        resetUrl()
        if(isHomeRech.value == undefined){ //判断是否是游戏充值
            pay_url.value += "ugamepay/index?game_id="+pay_info.value.gameId+"&server_id="+pay_info.value.serverId+"&role_id="+pay_info.value.roleId+"&c_text="+pay_info.value.cText+"&user_id="+pay_info.value.userId+"&cp_order_id="+pay_info.value.cp_orderId+"&sku="+pay_info.value.sku+"&payment="+type+"&type=2&order_type="+order_type.value
        }
        payment.value = type
		console.log(pay_url.value);
	}
    
    const handleChange = () => {
        
        // selectedCountry.value = value;
        console.log(selectedCountry.value);
        if(isHomeRech.value == undefined){
            if(localStorage.getItem('lang') == 'en'){
                switch (selectedCountry.value) {
                    case 'Hong Kong,Macau,Taiwan':
                        pay_list.value = pay_list_HMT;
                        setPayInfo('payuni');
                        break;
                    case 'Malaysia':
                        pay_list.value = pay_list_Malaysia;
                        isPaymentPage.value == undefined ? setPayInfo('platform') : setPayInfo('paypal');
                        break;
                    case 'Singapore':
                        pay_list.value = pay_list_Singapore;
                        isPaymentPage.value == undefined ? setPayInfo('platform') : setPayInfo('card');
                        break;
                    default:
                        selectedCountry.value = 'Global';
                        pay_list.value = mergeAndRemoveDuplicates(pay_list_Singapore,pay_list_HMT, pay_list_Malaysia);
                        setPayInfo('payuni');
                        break;
                }
            }else{
                switch (selectedCountry.value) {
                    case '港澳台':
                        selectedCountry.value = '港澳台';
                        pay_list.value = pay_list_HMT
                        setPayInfo('payuni')
                        break;
                    case '港澳台':
                        selectedCountry.value = '港澳台';
                        pay_list.value = pay_list_HMT
                        setPayInfo('payuni')
                        break;
                    case '港澳台':
                        selectedCountry.value = '港澳台';
                        pay_list.value = pay_list_HMT
                        setPayInfo('payuni')
                        break;
                    case '馬來西亞':
                        selectedCountry.value = '馬來西亞';
                        pay_list.value = pay_list_Malaysia
                        isPaymentPage.value == undefined ? setPayInfo('platform') : setPayInfo('paypal');
                        break;
                    case '新加坡':
                        selectedCountry.value = '新加坡';
                        pay_list.value = pay_list_Singapore
                        isPaymentPage.value == undefined ? setPayInfo('platform') : setPayInfo('card');
                        break;
                    default:
                        selectedCountry.value = '全球';
                        pay_list.value = mergeAndRemoveDuplicates(pay_list_HMT, pay_list_Singapore, pay_list_Malaysia);
                        setPayInfo('payuni')
                        break;
                }
            }
            
        }else{
            if(localStorage.getItem('lang') == 'en'){
                switch (selectedCountry.value) {
                    case 'Hong Kong,Macau,Taiwan':
                        pay_list.value = pay_list_HMT;
                        setPayInfo('payuni');
                        break;
                    case 'Malaysia':
                        pay_list.value = pay_list_Malaysia;
                        setPayInfo('paypal');
                        break;
                    case 'Singapore':
                        pay_list.value = pay_list_Singapore;
                        setPayInfo('card');
                        break;
                    default:
                        selectedCountry.value = 'Global';
                        pay_list.value = mergeAndRemoveDuplicates(pay_list_Singapore,pay_list_HMT, pay_list_Malaysia);
                        setPayInfo('card');
                        break;
                }
            }else{
                switch (selectedCountry.value) {
                    case '港澳台':
                        selectedCountry.value = '港澳台';
                        pay_list.value = pay_list_HMT
                        setPayInfo('payuni')
                        break;
                    case '港澳台':
                        selectedCountry.value = '港澳台';
                        pay_list.value = pay_list_HMT
                        setPayInfo('payuni')
                        break;
                    case '港澳台':
                        selectedCountry.value = '港澳台';
                        pay_list.value = pay_list_HMT
                        setPayInfo('payuni')
                        break;
                    case '馬來西亞':
                        selectedCountry.value = '馬來西亞';
                        pay_list.value = pay_list_Malaysia
                        setPayInfo('paypal')
                        break;
                    case '新加坡':
                        selectedCountry.value = '新加坡';
                        pay_list.value = pay_list_Singapore
                        setPayInfo('card')
                        break;
                    default:
                        selectedCountry.value = '全球';
                        pay_list.value = mergeAndRemoveDuplicates(pay_list_HMT, pay_list_Singapore, pay_list_Malaysia);
                        setPayInfo('payuni')
                        break;
                }
            }
        }
        
    };

    let pay_list = ref([]);
	let pay_list_HMT = []
	let pay_list_Singapore = []
	let pay_list_Malaysia = []
	let platform_list = []
	if(localStorage.getItem('lang') == 'en'){
		pay_list_HMT = [
            {
				pay_name:'payuni',
				img_url:'https://www.yyfuns.com/static/pay_icon/payuni.png',
				type:'payuni'
			},
			{
				pay_name:'Linepay',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_paypal_linepay.png',
				type:'linepay'
			},
			{
				pay_name:'MyCard',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_mycard.png',
				type:'mycard'
			},
			{
				pay_name:'Credit Card',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_visa.png',
				type:'card'
			},
            {
				pay_name:'Paypal',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
				type:'paypal'
			},
			{
				pay_name:'jkopay',
				img_url:'https://www.yyfuns.com/static/pay_icon/jkopay.png',
				type:'jkopay'
			},
			
			{
				pay_name:'Payme',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_payme.png',
				type:'payme'
			},
			// {
			// 	pay_name:'八達通',
			// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_badatong.png',
			// 	type:'F7'
			// },
			// {
			// 	pay_name:'weChat',
			// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_wechat.png',
			// 	type:'wetchat'
			// },
			{
				pay_name:'Alipay Hong Kong',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_alipay.png',
				type:'alipay_hk'
			},
		]
		
		pay_list_Singapore = [
			{
				pay_name:'Credit Card',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_visa.png',
				type:'card'
			},
			{
				pay_name:'Paypal',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
				type:'paypal'
			},
			{
				pay_name:'Paynow',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paynow.png',
				type:'paynow'
			},
			// {
			// 	pay_name:'Grabpay',
			// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_gray_sig.png',
			// 	type:'GRABPAY'
			// },
		]
		
		pay_list_Malaysia = [
			{
				pay_name:'Paypal',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
				type:'paypal'
			},
			{
				pay_name:'Touch’n Go',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_tng.png',
				type:'tng'
			},
			{
				pay_name:'FPX Net Banking',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_fpx.png',
				type:'fpx'
			},
			// {
			// 	pay_name:'Grabpay',
			// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_gray_sig.png',
			// 	type:'GRABPAY'
			// },
		]
        platform_list = [
            {
                pay_name:'Y Coin',
                img_url:'https://www.yyfuns.com/static/logoZY_en.png',
                type:'platform'
            }
        ]
	}else{
		pay_list_HMT = [
            {
				pay_name:'payuni',
				img_url:'https://www.yyfuns.com/static/pay_icon/payuni.png',
				type:'payuni'
			},
			{
				pay_name:'Linepay',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_paypal_linepay.png',
				type:'linepay'
			},
			{
				pay_name:'信用卡',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_visa.png',
				type:'card'
			},
            {
				pay_name:'MyCard',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_mycard.png',
				type:'mycard'
			},
			{
				pay_name:'街口支付',
				img_url:'https://www.yyfuns.com/static/pay_icon/jkopay.png',
				type:'jkopay'
			},
			{
				pay_name:'Paypal',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
				type:'paypal'
			},
			{
				pay_name:'Payme',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_payme.png',
				type:'payme'
			},
			// {
			// 	pay_name:'八達通',
			// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_badatong.png',
			// 	type:'F7'
			// },
			// {
			// 	pay_name:'weChat',
			// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_wechat.png',
			// 	type:'wetchat'
			// },
			{
				pay_name:'香港支付寶',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_alipay.png',
				type:'alipay_hk'
			},
            
		]
		
		pay_list_Singapore = [
			{
				pay_name:'信用卡',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_visa.png',
				type:'card'
			},
			{
				pay_name:'Paypal',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
				type:'paypal'
			},
			{
				pay_name:'Paynow',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paynow.png',
				type:'paynow'
			},
			// {
			// 	pay_name:'Grabpay',
			// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_gray_sig.png',
			// 	type:'GRABPAY'
			// },
		]
		
		pay_list_Malaysia = [
			{
				pay_name:'Paypal',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
				type:'paypal'
			},
			{
				pay_name:'Touch’n Go',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_tng.png',
				type:'tng'
			},
			{
				pay_name:'FPX Net Banking',
				img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_fpx.png',
				type:'fpx'
			},
			// {
			// 	pay_name:'Grabpay',
			// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_gray_sig.png',
			// 	type:'GRABPAY'
			// },
		]
        platform_list = [
            {
                pay_name:'Y幣',
                img_url:'https://www.yyfuns.com/static/logoZY.png',
                type:'platform'
            }
        ]
	}

    
    //首次进入判断用户地区
	if(localStorage.getItem('lang') == 'en'){
		switch (navigator.language) {
			case 'zh-TW':
				selectedCountry.value = 'Hong Kong,Macau,Taiwan';
				pay_list.value = pay_list_HMT
				setPayInfo('payuni')
				break;
			case 'zh-HK':
				selectedCountry.value = 'Hong Kong,Macau,Taiwan';
				pay_list.value = pay_list_HMT
				setPayInfo('payuni')
				break;
			case 'zh-MO':
				selectedCountry.value = 'Hong Kong,Macau,Taiwan';
				pay_list.value = pay_list_HMT
				setPayInfo('payuni')
				break;
			case 'ms-MY':
				selectedCountry.value = 'Malaysia';
				pay_list.value = pay_list_Malaysia
				isPaymentPage.value == undefined ? setPayInfo('platform') : setPayInfo('paypal');
				break;
			case 'en-SG':
				selectedCountry.value = 'Singapore';
				pay_list.value = pay_list_Singapore
				isPaymentPage.value == undefined ? setPayInfo('platform') : setPayInfo('card');
				break;
			default:
				selectedCountry.value = 'Global';
				pay_list.value = mergeAndRemoveDuplicates(pay_list_Singapore,pay_list_HMT, pay_list_Malaysia);
                if(isHomeRech.value == undefined && isPaymentPage.value == undefined){
                    pay_list.value.splice(2, 0,
                        {
                            pay_name:'Y Coin',
                            img_url:'https://www.yyfuns.com/static/logoZY_en.png',
                            type:'platform'
                        }
                    )
                }
				
                setPayInfo('card')
                console.log(pay_list.value);
                
				break;
		}
	}else{
		switch (navigator.language) {
			case 'zh-TW':
				selectedCountry.value = '港澳台';
				pay_list.value = pay_list_HMT
				setPayInfo('payuni')
				break;
			case 'zh-HK':
				selectedCountry.value = '港澳台';
				pay_list.value = pay_list_HMT
				setPayInfo('payuni')
				break;
			case 'zh-MO':
				selectedCountry.value = '港澳台';
				pay_list.value = pay_list_HMT
				setPayInfo('payuni')
				break;
			case 'ms-MY':
				selectedCountry.value = '馬來西亞';
				pay_list.value = pay_list_Malaysia
				isPaymentPage.value == undefined ? setPayInfo('platform') : setPayInfo('paypal');
				break;
			case 'en-SG':
				selectedCountry.value = '新加坡';
				pay_list.value = pay_list_Singapore
				isPaymentPage.value == undefined ? setPayInfo('platform') : setPayInfo('card');
				break;
			default:
				selectedCountry.value = '全球';
				pay_list.value = mergeAndRemoveDuplicates(pay_list_HMT, pay_list_Singapore, pay_list_Malaysia);
				if(isHomeRech.value == undefined  && isPaymentPage.value == undefined){
                    pay_list.value.splice(2, 0,
                        {
                            pay_name:'Y幣',
                            img_url:'https://www.yyfuns.com/static/logoZY.png',
                            type:'platform'
                        }
                    )
                }
                setPayInfo('payuni')
				break;
		}
	}

    const isDevice = ()=>{
        const userAgent = navigator.userAgent || window.opera;

        if(/iPhone|iPad|iPod/i.test(userAgent)){
            return 'ios'
        }else if(/Android/i.test(userAgent)){
            return 'android'
        }
    }
	
    const isAppWebView = () => {
        const userAgent = navigator.userAgent.toLowerCase();
        // 假设你的 App 会设置类似的 User-Agent 字符串
        if (userAgent.includes('歪歪兔') || userAgent.includes('wv')) {
            // alert('当前在app中')
            if(isDevice() == 'ios'){
                return 'ios';  // 是 WebView
            }else if(isDevice() == 'android'){
                return 'android';
            }
        }
        //   alert('当前在h5中')
        return false;  // 不是 WebView
    }

    
   
    function isWebView() {
        const userAgent = navigator.userAgent || navigator.vendor || window.opera;

        // 检查 iOS WebView 特征
        if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
            // WKWebView 通常不会设置 standalone 模式，并且会存在 safari 对象但没有 standalone 属性
            if ('safari' in window && !('standalone' in window.navigator)) {
                return true;
            }

            // 排除标准iOS浏览器 (如 Chrome, Firefox, Edge)
            if (/CriOS|FxiOS|Edg/.test(userAgent)) {
                return false;
            }

            // 默认情况下，假设是标准的 Safari 浏览器
            return false;
        }

        // 检查 Android WebView 特征
        if (/Android/.test(userAgent)) {
            // 如果用户代理字符串中包含 'wv'，则认为是WebView
            if (/wv/.test(userAgent)) {
                return true;
            }

            // 排除标准的安卓浏览器（Chrome）
            if (/Chrome/.test(userAgent) && !/wv/.test(userAgent)) {
                return false;
            }
        }

        // 检查其他特定Web视图（例如微信内置浏览器、微博等）
        if (/QQBrowser/.test(userAgent) || /Weibo/.test(userAgent) || /MicroMessenger/.test(userAgent)) {
            return true;
        }

        // 如果以上条件都不满足，则认为是在标准浏览器中
        return false;
    }

    const isWeb = ()=>{
        if (typeof webkit !== 'undefined' || typeof AndroidInterface !== 'undefined') {
            return true;
        } else {
            return false;
        }
    }

    function isFacebookBrowser() {
        const ua = navigator.userAgent;
        return /FBAN|FBAV/i.test(ua);
    }

    function isGoogleChrome() {
        return window.chrome && window.chrome.loadTimes
    }

    // alert(JSON.stringify(window.chrome))
    let iskongbai = ref(false)
    if(!isWeb() && isGoogleChrome()){
        iskongbai.value = true
    }

    // let iskongbai2 = ref(false)
    // if(!isWeb() && !isFacebookBrowser()){
    //     iskongbai2.value = true
    // }

    function isElementInViewport(el) {
        // console.log(el);
        
        const rect = el.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }


    onMounted(()=>{
        setTimeout(() => {
            if (!isElementInViewport(close_box.value)) {
                iskongbai.value = true
            }
        }, 1500);

        // watchEffect(()=>{
        //     if(couponPage.value){
        //         document.querySelector('.recharge_Box').style.overflow = 'hidden'
        //     }else{
        //         document.querySelector('.recharge_Box').style.overflow = 'auto'
        //     }
            
        // })
    })

    
        
	const goClientPay = ()=>{
        let couponUrl = ''
        if(selectedRadio.value){
            couponUrl = "&coupon_id="+coupon_id.value
            pay_url.value+=couponUrl
        }
        console.log(pay_url.value,payment.value,'pay_url.value');
        
        closeBox.value()
        
       

        console.log(isWebView());
        if(pay_type.value == 'platform'){ //用平台币充值弹窗是否完成支付
            setPayResult.value(pay_url.value)
            // props.openDialog()
        }else{
            if(isFacebookBrowser()){
                window.open(pay_url.value)
            }else if(!isWeb()){
                window.open(pay_url.value)
            }else if(isDevice() == 'ios'){
                webkit.messageHandlers.reloadView.postMessage("https:"+pay_url.value);
            }else if(isDevice() == 'android'){
                AndroidInterface.paly("https:"+pay_url.value);
            } 
        }
       
		
        // setPayResult.value(pay_url.value)
        console.log(price,'price');
        
        fbq('track', 'Purchase',{value:price.value,currency:'USD',time:new Date().getTime()});  
        // if(pay_type.value == 'platform'){ //用平台币充值弹窗是否完成支付
        //     props.openDialog()
        // }
	}

    
    const pay_result_src = ref('')
    const showPayResultStore = useShowPayResult()
    const goClientPay_platform = ()=>{
        // if(isHomeRech.value !== undefined && user_info.status == 0){ //判断是否是储值平台币还是游戏中充值、不写平台没参数会报错
        //     visible.value = true
		// 	return
        // }
        // isMasker.value = true
        // showPayResultStore.showPayResult()
        //判断是否设置安全码，弹出设置安全码
        // if(user_info.password == null){
        //     visible_setPwd.value = true
        //     return
        // }
        let couponUrl = ''
        if(selectedRadio.value){
            couponUrl = "&coupon_id="+coupon_id.value
        }
        resetUrl()
        pay_url.value += "ugamepay/index?user_id="+userid+"&payment="+payment.value+"&type=2&order_type="+order_type.value+"&sku="+sku.value+"&currency="+currency.value+couponUrl
        // pay_result_src.value = pay_url.value
        window.open(pay_url.value)
        setTimeout(() => {
            dialog_show.value = true //打开完成支付确认框
        }, 500);
        console.log(pay_url.value);
    }

    const close_pay_result = ()=>{
        isMasker.value = false
        showPayResultStore.unPayResult()
        pay_result_src.value = ''
    }
    
    const now_coupon_max = ref('')
    
    const select_price = (id,currency1,index,amount) =>{
        console.log(id,currency,index,amount);
        select_item.value = index
        sku.value = id
        currency.value = currency1
        select_amount.value = amount

        let maxAmount = (selectCurrency.value == 'TWD') ? now_coupon_max.value * 33 : now_coupon_max.value;
		
		if (amount < maxAmount) {
		  coupon_text.value = '';
		  selectedRadio.value = '';
		}
    }

    const userInfo = reactive([])
	const getUserInfo = async () =>{
	    const data = {
	        user_id:userid
	    }
	    const list = await axios.post('/getUserInfo',data)
	    Object.assign(userInfo,list.data)
	    // console.log(userInfo,'userInfo');
	    user_infoStore.setUserinfo(list.data.user_info)
	}
    
    window.addEventListener('message', function(event) {
        // console.log(123);
        if(event.data == 'unShow'){
            isMasker.value = false
            showPayResultStore.unPayResult()
            pay_result_src.value = ''
            getUserInfo()
        }else if(event.data == 'closeReg'){
            if(window.innerWidth > 1025){
                closeCouponPage()
                getCouponList()
                getUserInfo()
            }else{
                window.parent.postMessage('closeIframe', '*');
                couponPage.value = false
                getCouponList()
                getUserInfo()
            }
            
        }else if(event.data == 'closeLoadding'){
            isLoading.value = false
        }
    });

    if(isHomeRech.value == undefined && localStorage.getItem('lang') == 'zh'  && isPaymentPage.value == undefined){
        pay_list_HMT.splice(2, 0,
            {
                pay_name:'Y幣',
                img_url:'https://www.yyfuns.com/static/logoZY.png',
                type:'platform'
            }
        )
        pay_list_Singapore.unshift( 
            {
                pay_name:'Y幣',
                img_url:'https://www.yyfuns.com/static/logoZY.png',
                type:'platform'
            }
        )
        pay_list_Malaysia.unshift( 
            {
                pay_name:'Y幣',
                img_url:'https://www.yyfuns.com/static/logoZY.png',
                type:'platform'
            }
        )
        // pay_list.value.splice(2, 0,
        //     {
        //         pay_name:'Y幣',
        //         img_url:'https://www.yyfuns.com/static/logoZY.png',
        //         type:'platform'
        //     }
        // )
        // setPayInfo('platform')
    }

    if(isHomeRech.value == undefined && localStorage.getItem('lang') == 'en'  && isPaymentPage.value == undefined){
        pay_list_HMT.splice(2, 0,
            {
                pay_name:'Y Coin',
                img_url:'https://www.yyfuns.com/static/logoZY_en.png',
                type:'platform'
            }
        )
        pay_list_Singapore.unshift( 
            {
                pay_name:'Y Coin',
                img_url:'https://www.yyfuns.com/static/logoZY_en.png',
                type:'platform'
            }
        )
        pay_list_Malaysia.unshift( 
            {
                pay_name:'Y Coin',
                img_url:'https://www.yyfuns.com/static/logoZY_en.png',
                type:'platform'
            }
        )
        // pay_list.value.splice(2, 0,
        //     {
        //         pay_name:'Y Coin',
        //         img_url:'https://www.yyfuns.com/static/logoZY_en.png',
        //         type:'platform'
        //     }
        // )
        // setPayInfo('platform')
    }

    const visible = ref(false)
    const handleClose = () => {
        visible.value = false
    };

    let options = []
	const lang = ref('')
	if(localStorage.getItem('lang') == 'en'){
		lang.value = 'en'
		options = [
		  {
		    value: 'Hong Kong,Macau,Taiwan',
		    label: 'Hong Kong,Macau,Taiwan',
		  },
		  {
		    value: 'Malaysia',
		    label: 'Malaysia',
		  },
		  {
		    value: 'Singapore',
		    label: 'Singapore',
		  },
		  {
		    value: 'Global',
		    label: 'Global',
		  },
		];
	}else{
		lang.value = 'zh'
		options = [
			{
				value: '港澳台',
				label: '港澳台',
			},
			{
				value: '馬來西亞',
				label: '馬來西亞',
			},
			{
				value: '新加坡',
				label: '新加坡',
			},
			{
				value: '全球',
				label: '全球',
			},
		]
	}

    function isNumeric(str) {
        return /^\d+$/.test(str);
    }

    const handleSubmit_setPWd = () => {
        if (isNumeric(set_password.value) && set_password.value.length == 6) {
            setPwd()
        } else {
            ElMessage.error('安全碼只能是數字并且位6位數');
        }
    };

    const setPwd = async () =>{
        const info = {
            user_id: user_info.id,
            wallet_password: set_password.value
        }
        const data = await axios.post('/setWalletPassword',info)
        console.log(data);
        if(data.code == 200){
            handleClose_pwd();
            pay_url.value += "ugamepay/index?user_id="+userid+"&payment="+payment.value+"&type=2&order_type="+order_type.value+"&sku="+sku.value+"&currency="+currency.value
            dialog_show.value = true //打开完成支付确认框
            ElMessage.success(data.message);
            setTimeout(() => {
                window.open(pay_url.value)
            }, 1000);
            console.log(pay_url.value);
        }else{
            ElMessage.error(data.message);
        }
        
    }


    const isCoupon = ref(false)
    const selectedRadio = ref('')
    const coupon_text = ref('')
    const coupon_id = ref('')
    const now_coupon_type = ref(1)

    const use_coupon = ()=>{
        console.log(selectedRadio.value,coupon_list);
        
        const couponValue = coupon_list.value.find(item => item.id === selectedRadio.value);
        coupon_text.value = couponValue.coupon_money
        now_coupon_max.value = couponValue.max_money
        // coupon_id.value = selectedRadio.value
        coupon_id.value = couponValue.coupon_id
        isCoupon.value = false
        now_coupon_type.value = couponValue.coupon_type
    }


    const coupon_list = ref([])
    const getCouponList = async () =>{
        if(isEconomical.value){
            const list = await axios.get(`/coupon_list?user_id=${userid}&status=1&game_id=${pay_info.value.gameId}`)
            console.log(list.data,'list.data');
            coupon_list.value = list.data
            console.log(coupon_list.value,Array.isArray(coupon_list.value),'Array.isArray(coupon_list.value)');
            if(!Array.isArray(coupon_list.value)){
                coupon_list.value = Object.values(coupon_list.value)
            }
            
            console.log(coupon_list.value,coupon_list.value.length,'coupon_list.value');
            
        }else{
            const list = await axios.get(`/coupon_list?user_id=${userid}&status=1&use_scope=1`)
            coupon_list.value = list.data
        }
        
    }

    getCouponList()
    getUserInfo()

    const couponPage = ref(false)
    const toPages = ()=>{
        if(window.innerWidth > 1025){
            toDiscount()
        }else{
            window.parent.postMessage('toPages', '*');
            couponPage.value = true
            localStorage.setItem('isRegeframe',true)
        }
        
    }

    const couponPagePc = ref(false)
    const couponPageSrc = ref('')
    const toDiscount = ()=>{
        if(window.baseUrl == "http://192.168.110.244:8081/game/public"){ //判断是否本地或测试服
            couponPageSrc.value = '//'+window.location.hostname+":5178/#/pages/Recharge/economical/index"
        }else{
            couponPageSrc.value = '//'+window.location.hostname+"/h5/#/pages/Recharge/economical/index"
        }
        
        couponPagePc.value = true
        isLoading.value = true
        localStorage.setItem('isRegeframe',true)
    }

    const closeCouponPage = ()=>{
        couponPagePc.value = false
        couponPageSrc.value = ''
        isLoading.value = false
        localStorage.setItem('isRegeframe',false)
    }
    

    watchEffect(()=>{
        if(!goHome.value){
            couponPage.value = false
        }
    })
</script>

<style lang="less" scoped>

@media (min-width: 1025px) {
    .couponPage{
        height: 800px !important;
        overflow: hidden !important;
    }
    .kongbai{
        display: none;
    }
    .isEconomical{
        background-color: white;
        width: 600px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 15px;
        z-index: 10000;
        animation: popIn 0.3s ease-out;
    }
    .recharge_content {
        .price{
            font-size: 50px;
            font-weight: bold;
            text-align: center;
        }
        .close {
            transform: scale(1);
            z-index: 999;
            position: absolute;
            right: 10px;
            top: 10px;
            width: 40px;
            height: 40px;
            background-image: url();
        }
        .close:hover {
            cursor: pointer;
            background-image: url();
        }
        .recharge-content-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 13px;
            color: #4e4e4e;
            margin: 20px;
            position: relative;
            span {
                font-size: 12px;
                color: #99a2aa;
            }
            p{
                color: red;
                display: inline-block;
                position: absolute;
                right: 0;
                cursor: pointer;
                user-select: none;
                svg{
                    position: relative;
                    top: 1px;
                }
            }
            p:hover{
                text-decoration: underline;
            }
            .coupon_text{
                color: red !important;
                font-size: 15px !important;
            }
            .tip{
                position: absolute;
                right: 2px;
                bottom: 2px;
                cursor: pointer;
                color: red;
                font-size: 20px;
            }
            .tip_en{
                display: inline-block;
                max-width: 230px;
                font-size: 15px !important;
            }
            .tip:hover{
                text-decoration: underline;
            }
        }

        .pay-rechange-panel-box {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-flow: wrap;
            flex-flow: wrap;
            margin-top: 20px;

            .pay-rechange-item {
                margin-left: 45px;
                color: #222;
                box-sizing: border-box;
                border: 1px solid #e7ecf1;
                border-radius: 10px;
                height: 90px;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                margin-right: 16px;
                margin-bottom: 16px;
                cursor: pointer;
                padding: 12px 0;
                width: 200px;
                -ms-flex-direction: column;
                flex-direction: column;
                -ms-flex-pack: center;
                justify-content: center;
                position: relative;
                .bef{
                    position: absolute;
                    top: -1px;
                    left: -1px;
                    font-size: 12px;
                    background-color: #3f956a;
                    padding: 2px 10px;
                    border-radius: 10px 0;
                    color: white;
                }
                .pay-rechange-item-num {
                    display: -ms-flexbox;
                    display: flex;
                    -ms-flex-align: end;
                    align-items: flex-end;

                    .pay-rechange-item-num-title-1 {
                        font-size: 24px;
                    }


                }

                .pay-rechange-item-bottom {
                    margin-top: 5px;
                    font-size: 14px;
                    color: #757575;
                }
            }

            .pay-rechange-item-selected {
                border: 1px solid #3f956a;
                color: #3f956a;
                cursor: default;

                .pay-rechange-item-bottom {
                    color: #3f956a;
                }
            }
        }

        .saveChoose-btn {
            span{
                margin-left: 20px;
            }
            .select-wrapper {
                position: relative;
                display: inline-block;
            }

            .select-wrapper select {
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                background-color: #f1f1f1;
                padding: 8px 15px;
                border: 1px solid #ddd;
                border-radius: 5px;
                cursor: pointer;
                font-size: 16px;
                color: #333;
                width: 120px;
            }

            .select-wrapper select:focus {
                outline: none;
            }

            .select-wrapper select option {
                background-color: white;
                color: #333;
            }

            .select-wrapper select::-ms-expand {
                display: none;
            }

            .arrow {
                position: absolute;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);
                pointer-events: none;
            }

            // .arrow::before {
            //     content: "";
            //     border-style: solid;
            //     border-width: 5px 5px 0 5px;
            //     border-color: #333 transparent transparent transparent;
            //     display: inline-block;
            //     vertical-align: middle;
            //     transform: translateY(-50%);
            // }

            .select-wrapper select {
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                background-color: transparent;
                border: none;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                font-size: 16px;
                color: #333;
            }

            .select-wrapper select:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
            }

            .select-wrapper select option {
                background-color: #fff;
                color: #333;
            }
            .saveChoose-middle{
                margin-top: 20px;
                .data_pay_method{
                    display: grid;
                    grid-template-columns: repeat(5, 1fr); /* 每行5个项目，1fr表示平均分配剩余空间 */
                    gap: 10px; /* 项目之间的间隔 */
                    max-height: 405px;
                    overflow: auto;
                    li{
                        list-style: none;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        cursor: pointer;
                        padding: 10px;
                        border: 1px solid transparent;
                        border-radius: 12px;
                        width: 80px;
                        img{
                            width: 50px;
                            height: 50px;
                            // border-radius: 50%;
                        }
                        .add {
                            opacity: 1  ;
                            color: #fff;
                            background-color: red;
                            border-radius: 30px;
                            width: 35px;
                            text-align: center;
                            margin-top: 2px;
                            font-size: 12px;
                            padding: 2px 0px;
                            position: relative;
                            top: -8px;
                        }
                        .name{
                            text-align: center;
                            margin-top: 10px;
                        }
                    }
                    li:hover{
                        border: 1px solid #02a7e3;
                        
                    }
                    li.active{
                        background-color: #02a7e3;
                        color: white;
                        box-shadow: 0 2px 4px rgb(0 0 0 / 37%);
                    }
                }
            }
            .saveConfirm {
                padding: 24px;
                b{
                    font-weight: 100;
                }
                button{
                    background-color: #02a7e3;
                    color: #fff;
                    height: 44px;
                    border: none;
                    width: 100%;
                    border-radius: 14px;
                    cursor: pointer;
                }
                button:hover{
                    background-color: rgba(#02a7e3, 0.7);
                }
            }
        }
    }
    .blocker{
        width: 100vw;
        height: 100vh;
        position: fixed;
        top:0;
        left:0;
        background:rgba(0,0,0,.5);
        z-index: 9999 !important;
    }
}


@media (max-width: 1024px) {
    .recharge_content {
        padding: 15px 12px 90px;
        transition: all 0.2s ease 0s;
        .price{
            font-size: 50px;
            font-weight: bold;
            text-align: center;
        }
        .close {
            transform: scale(1.3);
            z-index: 999;
            position: fixed;
            right: 10px;
            top: 10px;
            width: 40px;
            height: 40px;
            background-image: url();
            transition: all 0.2s ease 0s;
        }
        .close:hover {
            cursor: pointer;
            background-image: url();
        }
        .recharge-content-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 13px;
            color: #4e4e4e;
            margin-top: 20px;

            span {
                font-size: 12px;
                color: #99a2aa;
            }
            .coupon_text{
                color: red !important;
                font-size: 15px !important;
            }
            .tip{
                display: block;
                color: red;
                font-size: 15px;
                margin-top: 10px;
            }
        }

        .pay-rechange-panel-box {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 10px;
            margin-top: 20px;
            .pay-rechange-item {
                margin-left: 0;
                margin-right: 0;
                color: #222;
                box-sizing: border-box;
                border: 1px solid #e7ecf1;
                border-radius: 10px;
                height: 80px;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                margin-bottom: 16px;
                cursor: pointer;
                padding: 12px 0;
                // width: 100px;
                -ms-flex-direction: column;
                flex-direction: column;
                -ms-flex-pack: center;
                justify-content: center;
                position: relative;
                .bef{
                    position: absolute;
                    top: 0;
                    left: -0.5px;
                    font-size: 10px;
                    background-color: #3f956a;
                    padding: 2px 7px;
                    border-radius: 10px 0;
                    color: white;
                }
                .pay-rechange-item-num {
                    display: -ms-flexbox;
                    display: flex;
                    -ms-flex-align: end;
                    align-items: flex-end;

                    .pay-rechange-item-num-title-1 {
                        font-size: 17px;
                    }

                    
                }
                .pay-rechange-item-bottom {
                    margin-top: 5px;
                    font-size: 13px;
                    color: #757575;
                }
            }

            .pay-rechange-item-selected {
                border: 1px solid #3f956a;
                color: #3f956a;
                cursor: default;

                .pay-rechange-item-bottom {
                    color: #3f956a;
                }
            }
        }

        .saveChoose-btn {
            .select-wrapper {
                position: relative;
                display: inline-block;
            }

            .select-wrapper select {
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                background-color: #f1f1f1;
                padding: 8px 15px;
                border: 1px solid #ddd;
                border-radius: 5px;
                cursor: pointer;
                font-size: 16px;
                color: #333;
                width: 105px;
            }

            .select-wrapper select:focus {
                outline: none;
            }

            .select-wrapper select option {
                background-color: white;
                color: #333;
            }

            .select-wrapper select::-ms-expand {
                display: none;
            }

            .arrow {
                position: absolute;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);
                pointer-events: none;
            }

            // .arrow::before {
            //     content: "";
            //     border-style: solid;
            //     border-width: 5px 5px 0 5px;
            //     border-color: #333 transparent transparent transparent;
            //     display: inline-block;
            //     vertical-align: middle;
            //     transform: translateY(-50%);
            // }

            .select-wrapper select {
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                background-color: transparent;
                border: none;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                font-size: 16px;
                color: #333;
            }

            .select-wrapper select:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
            }

            .select-wrapper select option {
                background-color: #fff;
                color: #333;
            }
            .saveChoose-middle{
                margin-top: 20px;
                height: calc(var(--bodyPay) - 352px);
                overflow-y: auto;
                overflow-x: hidden;
                .data_pay_method{
                    display: grid;
                    grid-template-columns: repeat(3, 1fr); /* 每行5个项目，1fr表示平均分配剩余空间 */
                    gap: 10px; /* 项目之间的间隔 */
                    li{
                        list-style: none;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        cursor: pointer;
                        padding: 10px;
                        border: 1px solid transparent;
                        border-radius: 12px;
                        width: 70px;
                        font-size: 14px;
                        img{
                            width: 50px;
                            height: 50px;
                        }
                        .add {
                            opacity: 1  ;
                            color: #fff;
                            background-color: red;
                            border-radius: 30px;
                            width: 35px;
                            text-align: center;
                            margin-top: 2px;
                            font-size: 12px;
                            padding: 2px 0px;
                            position: relative;
                            top: -8px;
                        }
                        .name{
                            text-align: center;
                            margin-top: 13px;
                        }
                    }
                    li:hover{
                        border: 1px solid #02a7e3;
                        
                    }
                    li.active{
                        background-color: #02a7e3;
                    }
                }
            }
            .saveConfirm {
                padding: 24px 0;
                // position: fixed;
                // width: 80%;
                // left: 50%;
                // transform: translate(-50%);
                // bottom: 0%;
                button{
                    background-color: #02a7e3;
                    color: #fff;
                    height: 44px;
                    border: none;
                    width: 100%;
                    border-radius: 14px;
                    cursor: pointer;
                }
                button:hover{
                    background-color: rgba(#02a7e3, 0.7);
                }
                b{
                    font-weight: 100;
                }
            }
        }
    }
    
}

.close {
    z-index: 100;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
    height: 40px;
    background-image: url();
}


@media (min-width: 1025px) {
    .coupon_width{
        width: 500px !important;
    }
    .game-box{
        width: 100%;
        height: calc(100vh - 65px);
        position: relative;
        z-index: 999;
    }
    .pay_result{
        background-color: #fff;
        width: 600px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
        height: 700px;
        border-radius: 15px;
        iframe{
            border-radius: 15px;
            position: relative;
            z-index: 99;
            overflow: hidden;
        }
        .close:hover {
            cursor: pointer;
            background-image: url();
        }
    }
    
}

@media (max-width: 1024px) {
    .pay_result{
        background-color: #fff;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
        height: var(--bodyPay);
        overflow: auto;
        iframe{
            position: relative;
            z-index: 99;
        }
    }
    .game-box{
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 999;
    }
    .recharge_content{
        background-color: white;
        position: fixed;
        // top: 50%;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 20px);
        z-index: 1000;
        padding: 0 10px;
        height: var(--bodyH);
        bottom: 0px;
        overflow: auto;
        animation: slide-up 0.2s ease-out forwards;
    }
    // .blocker{
    //     width: 100vw;
    //     height: 100vh;
    //     position: fixed;
    //     top:0;
    //     left:0;
    //     background:rgba(0,0,0,.5);
    //     z-index: 2;
    // }

    @keyframes slide-up {
        from {
            transform: translate(-50%, 100%);
        }
        to {
            transform: translate(-50%, 0);
        }
    }

    .recharge-content-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 13px;
        color: #4e4e4e;
        margin-top: 20px;
        position: relative;
        span {
            font-size: 12px;
            color: #99a2aa;
        }
        p{
            color: red;
            display: inline-block;
            position: absolute;
            right: 0;
            cursor: pointer;
            user-select: none;
            svg{
                position: relative;
                top: 1px;
            }
        }
        .coupon_text{
            color: red !important;
            font-size: 15px !important;
        }
    }
    .coupon{
        width: 85% !important;
        .item{
            width: 90% !important;
        }
    }
    .mask_Re{
        width: 100%;
        height: 110vh;
        background-color: rgba(0,0,0,.6);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
    }
}
.masker{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,.5);
    z-index: 9999 !important;
}

.modal-overlay,.modal-setPwd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-setPwd{
  z-index: 1001 !important;
}
.modal {
  background: linear-gradient(to bottom right, #f9f9f9, #ffffff);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  width: 320px;
  text-align: center;
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  flex-direction: column;
  p{
    font-size: 13px;
    margin-top: 5px;
    color: #7f7f7f;
  }
}

.modal-header h3 {
  margin: 0;
  font-size: 24px;
  color: #3c4043;
  font-family: 'Roboto', sans-serif;
}

.close-button {
  background: none;
  border: none;
  font-size: 28px;
  color: #9aa0a6;
  cursor: pointer;
  transition: color 0.3s ease;
  position: absolute;
  right: 20px;
  top: 10px;
}

.close-button:hover {
  color: #1a73e8;
}

.modal-body {
  margin-bottom: 20px;
}

.modal-body label {
  display: block;
  font-size: 16px;
  color: #3c4043;
  margin-bottom: 5px;
  font-family: 'Roboto', sans-serif;
}

.modal-body input {
  width: 90%;
  padding:10px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
}

.modal-footer {
  display: flex;
  justify-content: space-around;
}

.modal-footer button {
  margin-left: 10px;
  padding: 10px 45px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Roboto', sans-serif;
  margin-right: 0;
}


.modal-footer .cancel-button {
  background-color: #f5f5f5;
  color: #3c4043;
}

.modal-footer .cancel-button:hover {
  background-color: #ebebeb;
}

.modal-footer .confirm-button {
  background-color: #1a73e8;
  color: #fff;
}

.modal-footer .confirm-button:hover {
  background-color: #174ea6;
}

.coupon_black{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
.coupon{
    width: 400px;
    padding-bottom: 20px;
    border-radius: 12px;
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 99999;
    box-shadow: 1px 3px 10px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    .recharge_title {
        font-size: 23px;
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        text-align: center;
        margin-top: 5px;
        
    }
    .item{
        width: 82%;
        padding: 10px 0;
        background-color: #d4f3ff;
        border-radius: 10px;
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p{
            color: red;
            font-weight: bold;
        }
    }
    .button {
        // width: 100px;
        height: 38px;
        color: white;
        border: none;
        border-radius: 5px;
        background-color: #02a7e3;
        cursor: pointer;
        font-size: 17px;
        margin-top: 20px;
        padding: 0 10px;
    }
    .button:hover{
        animation: jello-horizontal 0.7s both;
    }
    .button:active{
        background-color: rgba(#02a7e3,.8);
    }
    .item_box{
        max-height: 400px;
        overflow: auto;
    }
}
.open{
  transform: translate(-50%, -50%) scale(1);
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

.coupon_notUse{
    filter: grayscale(1);
    pointer-events: none;
}

.isOverflow{
    overflow: hidden !important;
}
</style>